﻿<UserControl x:Class="MahApps.Metro.Controls.RevealImage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             x:Name="revealImage"
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>

        <Storyboard x:Key="OnMouseEnter1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border">
                <EasingDoubleKeyFrame KeyTime="0" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CircleEase EasingMode="EaseOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBlock">
                <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="OnMouseLeave1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBlock">
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border">
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    
    
    <UserControl.Triggers>
        <EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="grid">
            <BeginStoryboard Storyboard="{StaticResource OnMouseEnter1}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="grid">
            <BeginStoryboard x:Name="OnMouseLeave1_BeginStoryboard" Storyboard="{StaticResource OnMouseLeave1}"/>
        </EventTrigger>
    </UserControl.Triggers>

    <Grid x:Name="grid" MouseEnter="GridMouseEnter">
        <Image Source="{Binding ElementName=revealImage, Path=Image}" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0"/>
        <Border x:Name="border" BorderBrush="White" BorderThickness="2" Opacity="0">
            <Rectangle Margin="0" Stroke="Black" StrokeThickness="0">
                <Rectangle.Fill>
                    <RadialGradientBrush Center="0.25,0.25" GradientOrigin="0.25,0.25" Opacity="0.615">
                        <GradientStop Color="Black" Offset="1"/>
                        <GradientStop Color="#FF8D8D8D"/>
                    </RadialGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </Border>
        <TextBlock x:Name="textBlock" 
                       TextWrapping="Wrap" 
                       VerticalAlignment="Bottom" Margin="5"
                       Foreground="White" FontFamily="Segoe WP SemiLight" 
                       Opacity="0" />
    </Grid>
</UserControl>
